<template>
  <div id="app">
    <h2 id="mlh" ref="mlh">茉莉花</h2>
    <user id="user" ref="user"></user>
    <student
      :stuName="stuName"
      :grade="grade"
      :cls="cls"
      :age="age"
      @xxx="updateName"
    />
    <button @click="getDomElement">获取DOM元素</button>
  </div>
</template>

<script>
import User from "./components/User.vue";
import student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    User,
    student,
  },
  data() {
    return {
      stuName: "佐菲奥特曼",
      grade: "M78星",
      cls: "光之1班",
      age: 200,
    };
  },
  methods: {
    // 获取DOM元素
    getDomElement() {
      console.log(document.getElementById("user"));
      console.log("--------------------------------------");
      console.log(this.$refs.user);
      console.log(this.$refs.user.name);
      console.log(this.$refs.user.getMessage);
    },
    updateName(name, age) {
      this.stuName = name;
      this.age = age;
    },
  },
};
</script>

<style>
</style>
